<template>
	<view class="record">
		<!-- 日期选择器 -->
		<view class="record_header Row">
			<view class="time Row">
				<view class="" v-if="dataShow">
					<picker mode="date" :value="date" :start="startDate" fields="day" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker>
				</view>
				<view class="" v-else @click="optionData">请选择日期</view>
				<view class="iconfont">
					<image class="photoSize" src="/static/xiaLa.png" mode="aspectFill"></image>
				</view>
			</view>

			<picker class="picker" @change="changePickerUnit" :value="indexUnit" :range="unitList"
				:range-key="'hospital'">
				<view class="picker Row">
					{{unitList[indexUnit].hospital}}
					<!-- {{unitName}} -->

					<view class="iconfont">
						<image class="photoSize" src="/static/xiaLa.png" mode="aspectFill"></image>
					</view>
				</view>
			</picker>
		</view>

		<view class="record_detailList">
			<view v-if="detailList.length != 0">
				<view class="detailBox Column" v-for="(item,index) in detailList" :key="index">
					<view class="detail-title Row">
						<view class="Row" v-if="item.device_sn">{{item.device_sn}}</view>
						<view class="label">{{item.reward_type_text}}</view>
					</view>

					<view class="detail-items Column">
						<view class="productID Row">
							<h4 class="h4">奖励金额：</h4>{{item.reward_amount}}
						</view>
						<view class="productID Row">
							<h4 class="h4">扩展时间：</h4>{{item.transDate}}
						</view>
					</view>
				</view>
			</view>

			<view class="null" v-else>
				暂无数据
			</view>
		</view>
	</view>
</template>

<script>
	import {
		apiRewardTypes,
		apiRewardLog
	} from '@/api/reward.js';

	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				dataShow: false,

				indexUnit: 0, // 选中的下标
				unitName: '请选择', // 默认选项
				unitList: [],
				merchant_type: "",

				detailList: [],
				current_page: 1,
				last_page: 1
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			this.merchant_type = "";
		},
		onShow() {
			this.getRewardTypes();

			this.current_page = 1;
			this.last_page = 1;
			this.detailList = [];
			this.getDetail();
		},
		methods: {
			// 业绩类型
			getRewardTypes() {
				let that = this;
				apiRewardTypes().then(res => {
					const source = res.data;

					const list = Object.keys(source).map(key => ({
						merchant_type: key,
						hospital: source[key]
					}));
					list.unshift({
						merchant_type: "",
						hospital: "请选择"
					});

					this.unitList = list;
				}).catch(err => console.log(err))
			},
			optionData() {
				this.dataShow = true;
				this.current_page = 1;
				this.last_page = 1;
				this.detailList = [];
				this.getDetail();
			},

			getDetail() {
				let that = this;
				apiRewardLog({
					params: {
						reward_type: that.merchant_type,
						date_start: !that.dataShow ? '' : that.date,
						date_end: !that.dataShow ? '' : that.date,
						page: that.current_page,
					}
				}).then(res => {
					let array = res.data.list.data;
					array.forEach(e => {
						this.detailList.push(e)
					})
					this.last_page = res.data.list.last_page;
				}).catch(err => console.log(err))
			},

			changePickerUnit(e) {
				let index = e.detail.value;
				this.indexUnit = index;
				this.unitName = this.unitList[index].hospital;
				this.merchant_type = this.unitList[index].merchant_type;

				this.current_page = 1;
				this.last_page = 1;
				this.detailList = [];
				this.getDetail();
			},
			bindDateChange: function(e) { //选择日期
				this.date = e.detail.value;

				this.current_page = 1;
				this.last_page = 1;
				this.detailList = [];
				this.getDetail();
			},
			getDate(type) { //年月日
				const date = new Date();
				// const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
		},
		onReachBottom() {
			let that = this;
			that.current_page++;
			if (that.current_page > that.last_page) {
				uni.$u.toast('暂无更多~');
				return false;
			}
			that.getDetail();
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;
	}

	.record {
		width: 100%;

		.iconfont {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 14px;
			height: 14px;
			margin-left: 6px;
		}

		&_header {
			justify-content: space-between;
			width: 94%;
			background-color: white;
			padding: 12px;
			position: fixed;
			top: 0;

			.picker {
				align-items: center;
			}

			.time {
				font-size: 17px;
				border-radius: 8rpx;
				padding: 5rpx 12rpx;
			}
		}

		&_detailList {
			padding: 12px;
			margin-top: 50px;

			.null {
				height: 70vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.detailBox {
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				padding: 12px;
				margin-bottom: 12px;

				.detail-title {
					justify-content: space-between;
					width: 100%;
					font-size: 18px;
					border-bottom: 1px solid #f6f5fa;
					padding-bottom: 12px;
					margin-bottom: 12px;
				}

				.label {
					display: flex;
					justify-content: center;
					align-items: center;
					color: #0056FF;
					font-size: 16px;
					font-weight: 550;
					border-radius: 4px;
					border: 1px solid #0056FF;
					padding: 3px 8px;
				}

				.detail-items {
					width: 100%;

					.h4 {
						color: #7E7E9A;
						font-weight: 500;
						margin-right: 4px;
					}

					.label {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						width: 100%;
						color: #0056FF;
						font-size: 20px;
						font-weight: 550;
						padding: 8px 0;
					}

					.productID {
						font-size: 30rpx;
					}

					.money {
						// color: #e65e3f;
						width: 140px;
						justify-content: flex-end;
						font-size: 32rpx;
					}
				}
			}
		}
	}
</style>